<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col section_1 index_0" v-for="(item,index) in list" :key="index">
					<!-- <view class="flex-row group_2 center">
						<text class="text_1">材料名称</text>
						<input type="text" placeholder="请输入材料名称" v-model="item.materialName" class="text_3">
					</view>
					<image
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827920236464220.png"
						class="image_1" @click="del(index)" /> -->
					<view class="flex-col items-start group_3">
						<text class="text_5">材料清单图片</text>
						<shop-upload class="u-m-t-20" :maxCount="9" :fileList="item.materialPictures"
							@del="delectPic($event,index)" @success='success($event,index)'></shop-upload>
					</view>
				</view>
				<view class="flex-col items-center button" @click="add"><text class="text_10">+ 添加材料</text></view>
			</view>
			<view class="flex-col items-center button_1" @click="save"><text class="text_11">保存</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id: '',
				list: [], //存储材料
				cailiao1: '',
				cailiao2: '',
				fileList: [],
				ordersId: '',
				inspectionMaterialList: [] //材料详细信息
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.state = option.state;
			this.ordersId = option.ordersId;

			this.getpic();

		},
		methods: {
			// 添加材料 添加材料选项
			add() {
				this.list.push({
					materialName: '', //材料名称
					materialPictures: [], //材料图片
				})
			},
			// 获取上传图片
			getpic() {
				this.$http('mine.ordersEXL', {
					ordersId: this.ordersId
				}).then(res => {
					let arr = [];
					if (res.code == 200) {
						// 获取材料详细信息
						this.inspectionMaterialList = res.data.inspection.inspectionMaterialList;
						if (this.inspectionMaterialList && this.inspectionMaterialList.length > 0) {
							let list = []
							 //保存图片路径对象
							// this.inspectionMaterialList.map(item => {
							// 	if (item.materialPictures) { //图片路径
							// 		let pics = item.materialPictures.split(',');
							// 		pics.map(p => {
							// 			picArr.push({
							// 				url: p
							// 			})
							// 		})
							// 		// console.log('未知', picArr)
							// 	}
							// 	let it = {
							// 		materialName: item.materialName, //材料名称
							// 		materialPictures: picArr, //图片路径
							// 	}
							// 	list.push(it);
							// 	this.list = list;
							// })
							this.inspectionMaterialList.forEach(item => {
								let pics = item.materialPictures.split(',')								
								let picArr = []
								pics.forEach(item => {									
									picArr.push({url: item})									
								})
							
								list.push({
									materialName: item.materialName,
									materialPictures: picArr
								})
							})
							this.list = list;
						}else{
							this.list=[
								{
									materialName:'',
									materialPictures:[]
								}
							]
						}
					}
				})
			},
			updateOrdersStatus() {
				this.$http('mine.updateOrdersStatus', {
					ordersId: this.ordersId,
					ordersStatus: '3'
				}).then(res => {
					if (res.code == 200) {

					}
				})
			},
			// 删除
			del(index) {
				this.list.splice(index, 1)
			},
			delectPic(i, index) {
				let item = this.list[index];
				console.log(item.materialPictures);
				item.materialPictures.splice(i, 1);
				console.log(item.materialPictures);
				this.$set(this.list,index,item);
			},
			success(event, index) {
				let item = this.list[index];
				item.materialPictures.push({
					url: event.url
				});
				this.$set(this.list, index, item);
				// this.list[index].materialPictures.push({
				// 	url: event.url
				// })
			},
			// 保存
			save() {
				let list = [];
				let obj = {}
				this.list.forEach((item, index) => {
					obj = item
					let pic = [];
					item.materialPictures.map(it => {
						pic.push(it.url);
					});
					list.push({
						materialName: item.materialName,
						materialPictures: pic.join(','),
						num: index
					})
					console.log("保存list", list)
				})
				
					if(obj.materialName == '') {
						return this.$u.toast('请输入材料名称')
					}
			
				this.$http('explan.ordersXJ', {
					inspectionId: this.id,
					inspectionMaterialList: list
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 200) {
						// this.updateOrdersStatus()
						let pageNum = 2
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - pageNum]; // 前一个页面
						console.log(beforePage);
						uni.navigateBack({
							success: function() {
								beforePage.$vm.init();
							}

						});
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.center {
		align-items: center;
	}
	.section_1 {
		padding: 0 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.group_2 {
		padding: 32rpx 0;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_3 {
		padding: 32rpx 0 32rpx;
		position: relative;
	}

	.text_1 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_3 {
		margin-left: 39rpx;

		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_2 {
		margin-top: 33rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 100vh;
	}

	.group {
		padding: 25rpx 24rpx 64rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button_1 {
		margin: 135rpx 8rpx;
		padding: 19rpx 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.view_3 {
		margin-top: 20rpx;
	}

	.button {
		margin-top: 32rpx;
		padding: 20rpx 0;
		align-self: flex-end;
		border-radius: 44rpx;
		border: 1px solid #1d6aff;

		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 200rpx;
	}

	.text_11 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_1 {
		border-radius: 0px 16rpx 0px 16rpx;
		width: 48rpx;
		height: 40rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.image_4 {
		width: 48rpx;
		height: 40rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.text_10 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_3 {
		width: 156rpx;
		height: 156rpx;
	}

	.image_5 {
		border-radius: 16rpx;
		width: 156rpx;
		height: 156rpx;
	}
</style>
